<template>
  <div class="home-box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id">
        <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt />
      </van-swipe-item>
    </van-swipe>
    <div class="div">
      <van-search v-model="value" show-action placeholder="请输入小区或者地址" background="none" disabled>
        <template #action>
          <div @click="onSearch">
            <van-icon class="iconfont icon-map" />
          </div>
        </template>
        <template #label>
          <div @click="addcity">
            <p>{{hot}}</p>
          </div>
        </template>
      </van-search>
      <div class="box"></div>
    </div>
    <van-grid :border="false" icon-size="60px" route>
      <van-grid-item :icon="icon1" text="整租" to="/home/list" />
      <van-grid-item :icon="icon2" text="合租" to="/home/list" />
      <van-grid-item :icon="icon3" text="地图找房" to="/map" />
      <van-grid-item :icon="icon4" text="去出租" to="/goshoping" />
    </van-grid>
    <div class="mmhh">
      <div class="zhufan">
        <div class="hh">
          <h4>租房小组</h4>
          <p>更多</p>
        </div>
      </div>
      <div class="yy">
        <div class="left">
          <div class="img">
            <img :src="`http://115.159.87.220:8080${imgSrc[0][0]}`" alt="图片" />
          </div>
          <div class="p">
            <p>{{title[0][0]}}</p>
            <p>{{desc[0][0]}}</p>
          </div>
        </div>
        <div class="rigth">
          <div class="img">
            <img :src="`http://115.159.87.220:8080${imgSrc[0][1]}`" alt="图片" />
          </div>
          <div class="p">
            <p>{{title[0][1]}}</p>
            <p>{{desc[0][1]}}</p>
          </div>
        </div>
      </div>
      <div class="yy">
        <div class="left">
          <div class="img">
            <img :src="`http://115.159.87.220:8080${imgSrc[0][2]}`" alt="图片" />
          </div>
          <div class="p">
            <p>{{title[0][2]}}</p>
            <p>{{desc[0][2]}}</p>
          </div>
        </div>
        <div class="rigth">
          <div class="img">
            <img :src="`http://115.159.87.220:8080${imgSrc[0][3]}`" alt="图片" />
          </div>
          <div class="p">
            <p>{{title[0][3]}}</p>
            <p>{{desc[0][3]}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { gethot, getgroups } from '@/api/map'
import requset from '@/utils/requset'
export default {
  name: 'VueHaowuShouye',

  data () {
    return {
      value: '',
      list: [],
      hot: '',
      hotlist: [],
      icon1:
        '',
      icon2:
        '',
      icon3:
        '',
      icon4:
        ''
    }
  },
  computed: {
    title () {
      const res = []
      res.push(this.hotlist.map(item => item.title))
      return res
    },
    desc () {
      const res = []
      res.push(this.hotlist.map(item => item.desc))
      return res
    },
    imgSrc () {
      const res = []
      res.push(this.hotlist.map(item => item.imgSrc))
      return res
    }
  },
  created () {
    this.getSwipe()
    this.getlist()
    this.getgroup()
  },
  methods: {
    async getgroup () {
      const hotlist = JSON.parse(localStorage.getItem('hotlist'))
      const id = hotlist.map((item) => item.val)
      const res = await getgroups({ id })
      this.hotlist = res.body
      // console.log(res.body)
    },
    onSearch () {
      this.$router.push('/map')
    },
    addcity () {
      this.$router.push('/city')
    },
    async getSwipe () {
      const res = await requset({
        url: '/home/swiper'
      })
      this.list = res.body
    },
    async getlist () {
      const res = await gethot()
      if (localStorage.getItem('dan')) {
        this.hot = localStorage.getItem('dan')
      } else {
        this.hot = res.body[2].label
      }
      localStorage.setItem('hot', JSON.stringify(res.body[2]))
    }
  }
}
</script>

<style lang="less" scoped>
.home-box {
  position: relative;
  .my-swipe {
    img {
      width: 100%;
    }
  }
  .div {
    position: absolute;
    top: 0;
    left: 0;
    /deep/ .van-search {
      margin-left: 20px;
      margin-top: 10px;
      width: 100%;
      .van-cell {
        margin-left: 25px;
      }
      .van-icon-guide-o:before {
        font-size: 20px;
        background-color: #fff;
      }
    }
    .box {
      position: absolute;
      margin-left: 90px;
      margin-top: -35px;
      width: 1px;
      height: 18px;
      background-color: #ccc;
    }
  }
  /deep/ .van-grid {
    .van-grid-item__text {
      margin-top: 16px;
    }
  }
  .mmhh {
    background-color: #f6f5f6;
    .zhufan {
      .hh {
        display: flex;
        justify-content: space-between;
        h4 {
          font-size: 15px;
          margin-left: 15px;
        }
        p {
          color: #787d82;
          margin-right: 10px;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    .yy {
      display: flex;
      justify-content: space-between;
      .left {
        margin-bottom: 10px;
        margin-left: 10px;
        display: flex;
        justify-content: space-around;
        width: 172px;
        height: 50px;
        background-color: #fff;
        .img {
          width: 20px;
          height: 20px;
          font-size: 12px;
        }
        .p {
          display: flex;
          flex-direction: column;
          p {
            margin-top: 2px;
            font-size: 14px;
          }
        }
      }
      .rigth {
        margin-bottom: 10px;
        margin-right: 10px;
        display: flex;
        justify-content: space-around;
        width: 172px;
        height: 50px;
        background-color: #fff;
        .img {
          width: 20px;
          height: 20px;
          font-size: 12px;
        }
        .p {
          display: flex;
          flex-direction: column;
          p {
            margin-top: 2px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
/deep/ .van-search__label {
  height: 20px;
  p {
    margin-top: -1px;
  }
}
</style>
